<template>
    <div>
        <div class="status-bar" :style="{height:statusBarHeight + 'px'}"></div>
        <navbar class="navbar" :style="{backgroundColor: 'white' }">
            <navbar-item type="left" @click="backClick" >
                <div v-if="back">
                    <text class="iconLeft" >&#xe659;</text>
                </div>
            </navbar-item>
            <navbar-item type="title" >
                <text class="text">{{title}}</text>
            </navbar-item>
        </navbar>
    </div>
</template>

<script>
    export default {
        data(){
            return{
                statusBarHeight: eeui.getStatusBarHeightPx(),
            }
        },
        created() {
            this.initIconFont()
        },
        props:{
            title:String,
            back:{
                default:true,
            }
        },
        methods:{
            backClick(){
                if(this.back){
                    eeui.closePage()
                }

            }
        }
    }
</script>

<style scoped>
    .navbar {
        width: 750px;
        height: 100px;
    }
    .text {
        font-size: 36px;
    }
    .status-bar {
        background-color: white;
    }
    .iconLeft{
        color: black;
        font-size: 30px;
        padding-left: 30px;
        padding-right: 30px;
        font-family: iconfont2;
    }
</style>
